<!--
 * @Description: 预览页面
 * @Author: lsb
 * @Date: 2022-03-24 
 * @LastEditors: xxx
 * @LastEditTime: 2022-03-24
 -->
<template>
   <div style="text-align:center;margin: 5px auto">
   <div  class="list-group"  >
	 <div class="list-group-item" :rowId="row.rowId"  v-for="(row,rowId) in ctrlProperties" :key="rowId" >
        <div class="Grid-cell" :type="item.type" :id="item.id"  v-for="(item,d) in row" :key="d" >
		  <PublicLabel :item="item" />
		  <PublicItem :item="item" @change="handleChange" :design="isDesign" /> 	  
        </div>
      </div>
    </div>	  
	 <span slot="footer" class="dialog-footer">
	  <el-button @click="goBack">返回</el-button>
	 </span>
	 </div>
</template> 
<script>
 import PublicItem from "../PublicItem/index";
 import PublicLabel from "../PublicLabel/index";
 import storage from 'good-storage';
export default {
  name: "prevViewCtrl",
  
  components: {
    PublicItem,
	PublicLabel
  },
  mounted() {
    debugger;
    this.ctrlProperties = storage.get('prevctrl');
  },
   data() {
    return {
	  data:{},
	  visible:false,
	  isDesign:0,
	  ctrlId:'',
	  timer:'',
	  ctrlProperties:''
	}
 },
  methods: {
    goBack() {
	  //debugger;
	  this.$router.push({ path: "/MyCustomDrag"});
    },
	handleChange(value, key) {
       //debugger;
      this.data[key] = value;
   },
   saveProperty(){
	var i;
    //debugger;
	for(i=0;i<this.projectParameters.ctrlProperties.length;i++){
	  var row  = this.projectParameters.ctrlProperties[i];
	  var item=row[0];
	  //循环遍历对象属性
	  for(let [key,value] of Object.entries(item)){
		  if(value!=this.data[key]){
			this.data[key]=value;
		  }
	  }
	}
	if(this.ctrlId!=this.projectParameters.id){
	  this.ctrlId = this.projectParameters.id;
	}
   }
  },
  beforeDestroy() {
      clearInterval(this.timer);
  }
};
</script>
<style  scoped>
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 10px;
  border: 0;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
